<template> 
    <div id="login">
        <div class="login-main">
            <div class="layui-elip">会员登录</div>
            <div class="layui-form-item">
                <el-input v-model="username" placeholder="请输入用户名"></el-input>
            </div>
            <div class="layui-form-item">
                <el-input v-model="userpassword" placeholder="请输入用户密码" show-password></el-input>
            </div>     
             <div class="layui-form-item">
                <el-checkbox v-model="isrempwd" style="float: right;">记住密码</el-checkbox>
            </div>   
            <div class="layui-form-item"></div> 
             <div class="layui-form-item">
                <el-button type="primary" style="width: 100%" @click="login()">登 录</el-button>
            </div>                      
        </div>
    </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'login',
  data () {
    return {
        username: '',
        userpassword: '',
        isrempwd: false
    }
  },
  mounted: function() { 
    this.username = this.$cookies.get('username');
    this.userpassword = this.$cookies.get('userpassword');
  },   
  methods: {
    login: function () {
      var self = this;

       if(this.username == '' || this.username == null) {
          this.$message.error('用户名不能为空，请重新输入！');
          return;
       }

       if(this.userpassword == '' || this.userpassword == null) {
          this.$message.error('用户密码不能为空，请重新输入！');
          return;
       }   

       if(this.isrempwd) {
          this.$cookies.set('username',this.username);
          this.$cookies.set('userpassword',this.userpassword);
       }  
       else {
          this.$cookies.remove('username');
          this.$cookies.remove('userpassword');
       } 

      var location = 'http://cms.o4.com/mobilelogin';

      axios.post(location,{      
          username:this.username,
          password:this.userpassword
          }).then(function(res){
              if(res.data.state == 0) {
                self.$message.error('用户或密码不正确，请重新输入！');
              }
              else {
                console.log(res.data.userinfo);
                self.$cookies.set('userinfo',res.data.userinfo);  
                self.$router.push({ path: '/' });  
              }
          }).catch(function (error) {
              console.log(error);
          });  
    }
  }  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.login-main {margin: 0 auto;border: 1px solid #ddd;background: #fff;padding: 0 20px; width: 400px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.login-main .layui-elip {margin-top: 10%;height: 35px; line-height: 35px; font-size: 30px; font-weight: 100; text-align: center; }
.login-main .layui-elip span.version {font-size: 12px; }
.login-main .layui-form-item {padding: 8px;}
</style>
